<template>
	<view class="order-result-box">
		<view class="tip">
			购买成功后，商品将放入你的背包，需手动发货
		</view>

		<!-- 商品信息 -->
		<view class="order-info public345">
			<!-- 订单信息图片 -->
			<view class="order-info-img">
				<image class="image" :src="imagesUrl('demo-shop.png')" mode="" />
			</view>
			<!-- 订单信息右侧 -->
			<view class="order-info-right">
				<!-- 商品名称 -->
				<view class="order-info-name">
					商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称
				</view>
				<!-- 步进器 -->
				<view class="order-current-num">
					<view :class="currentNumber===1?'cut-btn cannot':'cut-btn'"
						@click="currentNumber===1?currentNumber:currentNumber--">
						−
					</view>
					<!-- 当前商品数量 -->
					<view class="current-num">
						{{currentNumber}}
					</view>
					<view class="add-btn" @click="currentNumber++">
						＋
					</view>
				</view>
				<!-- 单价 -->
				<view class="order-one-money">
					￥{{oneMoney}}
				</view>
			</view>
		</view>

		<!-- 商品总价 -->
		<view class="less-money public345" style="margin-top: 18rpx;">
			<text>商品总价</text>
			<text>￥30.36</text>
		</view>

		<!-- 黄金会员 -->
		<view class="less-money public345">
			<text>黄金会员</text>
			<text>9.5折</text>
		</view>

		<!-- 优惠 -->
		<view class="less-money public345">
			<text>优惠</text>
			<view style="display: flex;align-items: center;">
				<text style="color: #D0D0D0;font-size: 28rpx;line-height: 32rpx;">暂无可用</text>
				<uni-icons type="forward" size="18" color="#999"></uni-icons>
			</view>
		</view>

		<!-- 黄金会员 -->
		<view class="less-money public345">
			<text style="font-weight: 600;">实付金额</text>
			<text style="font-size: 32rpx;font-weight: 500;color: #FF7803;">￥92.24</text>
		</view>

		<!-- 支付方式 -->
		<view class="way-box public345">
			<view class="way-tip">支付方式</view>
			<!-- 遍历三种支付方式 -->
			<!-- 余额不足时 样式类名 cannot -->
			<view class="way" v-for="(one,index) in threePayWay" :key="index">
				<!-- 左侧盒子 -->
				<view class="way-left">
					<!-- 支付方式logo -->
					<image class="image" :src="imageUrl(one.iconPath)" mode="" />
					<view class="way-main">
						<!-- 名称 -->
						<view class="way-name">
							{{one.name}}
						</view>
						<!-- 余额 -->
						<view class="rest-money">
							{{one.rest}}
						</view>
					</view>
				</view>
				<!-- 右侧单选框 -->
				<uni-icons :type="index===checkedIndex?'checkbox-filled':'circle'" size="26"
					:color="index===checkedIndex?'#FF7803':'#D0D0D0'" class="way-right"
					@click="changeCheckedIndex(index)"></uni-icons>
			</view>
		</view>

		<view style="height: 130rpx;"></view>

		<!-- 提交订单 -->
		<view class="put-up public345">
			<view class="put-up-left">
				共计：
				<text style="color: #FF7803;">
					<text style="font-size: 40rpx;">19.36</text>
					<text>元</text>
				</text>
			</view>
			<!-- 提交按钮 -->
			<view class="put-up-right">
				<view @click="goToPage('/pages/shop/OrderSuccess')">提交订单</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 订单当前数量
				currentNumber: 1,
				// 单价
				oneMoney: '30.36',
				// 三种支付方式
				threePayWay: [{
					iconPath: 'burst-point-pay.png',
					name: '爆点支付',
					rest: '爆点：99.62'
				}, {
					iconPath: 'rest-pay.png',
					name: '余额支付',
					rest: '余额：99.62'
				}, {
					iconPath: 'wx-pay.png',
					name: '微信支付',
					rest: '微信支付订单'
				}],
				// 默认余额支付
				checkedIndex: 2,
				isTransportationExplain: false
			}
		},
		computed: {
			// 总价
			totalMoney() {
				return (this.currentNumber * this.oneMoney * 100) / 100
			}
		},
		methods: {
			// 改变选中的支付方式
			changeCheckedIndex(v) {
				// 需要判断余额是否足够支付
				this.checkedIndex = v
				console.log(this.checkedIndex, this.threePayWay[this.checkedIndex].name)
			},
			goToPage(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-result-box {
		width: 100vw;
		font-size: 28rpx;

		.tip {
			display: block;
			width: 100vw;
			height: 72rpx;
			padding: 0 0 0 30rpx;
			font-size: 26rpx;
			background: rgba(255, 120, 3, 0.1);
			color: #FF7803;
			line-height: 72rpx;
		}

		// 订单信息
		.order-info {
			display: flex;
			justify-content: space-around;
			// margin-top: 18rpx;
			padding-top: 30rpx;
			padding-bottom: 32rpx;
			background-color: #fff;

			.order-info-img {
				.image {
					width: 198rpx;
					height: 198rpx;
					margin-right: 20rpx;
					border-radius: 16rpx;
				}
			}

			// 订单信息右侧
			.order-info-right {
				position: relative;

				// 订单商品名称
				.order-info-name {
					width: 472rpx;
					line-height: 44rpx;
					-webkit-line-clamp: 2;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				// 订单当前数量
				.order-current-num {
					position: absolute;
					bottom: 0;
					right: 10rpx;
					display: flex;
					float: right;
					line-height: 64rpx;
					text-align: center;

					>view {
						width: 64rpx;
					}

					.cut-btn {
						background: #F8F8F8;
						font-size: 28rpx;
						border-top-left-radius: 16rpx;
						border-bottom-left-radius: 16rpx;

						// 禁用
						&.cannot {
							color: #999;
						}
					}

					.add-btn {
						background: #F8F8F8;
						font-size: 28rpx;
						border-top-right-radius: 16rpx;
						border-bottom-right-radius: 16rpx;
					}
				}

				// 单价
				.order-one-money {
					position: absolute;
					bottom: 0;
				}
			}
		}

		// 弹出层标题
		.popup-title text {
			display: block;
			text-align: center;
			font-size: 28rpx;
			font-weight: 600;
			line-height: 100rpx;
		}

		// 弹出层-运费
		.popup-transportation {
			width: 568rpx;
			padding: 0 30rpx 30rpx;
			font-size: 26rpx;
			line-height: 40rpx;
			box-sizing: border-box;
		}

		.know-btn {
			width: 500rpx;
			margin: 18rpx auto;
			border-radius: 44rpx;
			text-align: center;
			line-height: 88rpx;
			background: #FF7803;
			font-size: 28rpx;
			color: #FFF;
		}

		.less-money {
			display: flex;
			justify-content: space-between;
			line-height: 72rpx;
			background-color: #fff;
		}

		// 支付方式
		.way-box {
			margin-top: 18rpx;
			background-color: #fff;

			.way-tip {
				line-height: 94rpx;
			}

			// 三种方式
			.way {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 0;
				// 分隔线
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);

				.way-left {
					display: flex;

					.image {
						width: 46rpx;
						height: 46rpx;
						margin: 20rpx 32rpx 0 0;
					}

					.way-main {
						line-height: 44rpx;

						.way-name {
							font-size: 26rpx;
							font-weight: 500;
							color: #333;
						}

						// 支付余额
						.rest-money {
							font-size: 24rpx;
							color: #999999;
						}
					}
				}

				// 支付方式右侧选中框
				.way-right {
					margin-top: 20rpx;
				}

				// 余额不足时的样式
				&.cannot {
					opacity: .5;

					.way-right {
						display: none;
					}
				}
			}

			// 清除最后一项的下边框
			.way:last-child {
				border: 0;
			}
		}

		// 提交订单
		.put-up {
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			padding-top: 16rpx;
			padding-bottom: 16rpx;
			background-color: #fff;
			// 小程序 底部
			// 兼容 IOS 11.2 以下
			// padding-bottom: constant(safe-area-inset-bottom);
			// 兼容 IOS 11.2 以上
			// padding-bottom: env(safe-area-inset-bottom);

			// 预设一个高度
			padding-bottom: calc(18rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(18rpx + env(safe-area-inset-bottom));

			.put-up-right {
				width: 336rpx;
				border-radius: 44rpx;
				background: #FF7803;
				color: #fff;
				text-align: center;
				line-height: 88rpx;
				font-size: 28rpx;
			}

			.put-up-left {
				color: #999;
				font-size: 24rpx;
			}
		}
	}
</style>
